<template>
  <div class="item-list">
    <div v-if="$route.query.id==3" id="course">
    <div class="item-box" v-for="(item,i) in datalist" :key="i" @click="$router.push(`/coursedetail/${item._id}`)">
      <div class="course-content">
        <div class="left-part">
          <div class="avatar">
            <avatar v-if="item.courseObj && item.courseObj.gender == '男'" :src="require('../../assets/avatar1.png')"
              :size="40"></avatar>
            <avatar v-else-if="item.courseObj && item.courseObj.gender == '女'" :src="require('../../assets/avatar2.png')"
              :size="40"></avatar>
            </div>
          <div class="course-teacher">
            <p class="course">{{item.content}}</p>
            <p class="teacher">{{item.title}}
              <!-- <span>{{item.courseObj && item.courseObj.gender}}</span> -->
              <span style="color:#666666;">{{item.courseObj && item.courseObj.college}}</span>
            </p>
          </div>
        </div>
        <div class="total-score">
          <span class="score">{{Average(item.scores) || 0}}分</span>
          <p class="total">{{item.cmtNum || 0}}人评价</p>
        </div>
      </div>
      <div class="tags">
        <span class="tag" v-for="(item, index) in Tags(item.tags)" :key="index" >{{`${item.value}(${item.num})`}}</span>
      </div>
    </div>
    </div>
    <div v-else>
    <div class="item-list-box" @click="toDetail(item)" v-for="(item,i) in datalist" :key="i">
      <div v-if="$route.path==='/home'" class="qizhi">
        <!-- <span>热{{i+1}}</span> -->
        <i v-if="i===0" style="color:#eb6363;" class="icon-icon-test2"></i>
        <i v-if="i===1" style="color:#eb6363;" class="icon-icon-test"></i>
        <i v-if="i===2" style="color:#eb6363;" class="icon-icon-test1"></i>
        <i v-if="i>2" class="icon-remen"></i>
      </div>
      <div class="top">
        <div class="left" @click.stop="_turntoIndex(item)">
          <avatar username="Lairenna" :src="item.creator && item.creator.avatar" :size="40"></avatar>
          <span v-if="item.creator._id!==userInfo._id">
            <img class='attention' src="../../../static/attention.png" width='20' height='20' @click.stop="watchUser(item.creator)"
              v-if="!watchObj[(item.creator||{})._id]"
            />
          </span>
        </div>
        <div class="right">
          <div class="right-1">
            <div class="name-box">
              <span>{{item.creator && item.creator.nickname}}</span>
              <!-- <i class="icon-level-3"></i> -->
            </div>
            <div>
              <span class="time-label">{{getTime(item.createTime)}}</span>
              <span v-if="item.type===0" class="item-from">来自#{{`${item.category}${item.secCategory?'·'+item.secCategory:''}`}}#</span>
              <span v-if="item.type===1" class="item-from">来自#活动#</span>
              <span v-if="item.type===2" class="item-from">来自#投票#</span>
              <span v-if="item.type===4" style="margin-left:60px;text-align:right;font-size:18px;color:#666666;">¥{{item.scObj.price}}</span>
            </div>
          </div>
          <div class="right-2">
            <i class="icon-down" @click.stop="$emit('remove',item)"></i>
          </div>
        </div>
      </div>
      <div class="main">
        <div v-if="item.type===4" style="line-height:24px;font-size:14px;color:#000000;">{{item.scObj.isBuy?'[要买] ':'[要卖] '}}{{item.title}}</div>
        <div class="con" v-html="(item.content || '').replace(/\r?\n/g, '<br />')"></div>
        <div class="img-list">
          <div class="img-box" :class="{'changeImg':item.imgs.length>1}" v-for="(img,index) in item.imgs" :key="index">
            <img @click.stop="" v-gallery="item.imgs" v-lazy="img.url" :src="img.url" alt=""/>
          </div>
        </div>
      </div>
      <div class="foot">
        <span @click.stop="setFenxiangVal({ show: true, item: item })"><i class="icon-fenxiang"></i></span>
        <span><i class="icon-message"></i>{{item.cmtNum || 0}}</span>
        <span @click.stop="_toLike(item)">
          <i class="icon-dianzan1" :class="{active: myLikePostObj[item._id]}"></i>{{item.likeNum || 0}}
        </span>
      </div>
    </div>
    </div>
  </div>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
// import { Cell } from 'vux';
import { formatMsgTime } from '../../js/getTime'
const MineStore = namespace('mine');
const HomeStore = namespace('home');
const ListStore = namespace('list');

@Component({
  components: { Avatar }
})
export default class Item extends Vue {
  @Prop(Array) datalist
  @Prop(Array) hasLikeArr
  @Prop(Array) hasAttenArr
  @ListStore.State tagsList
  @ListStore.State tagsObject
  @ListStore.Mutation setFenxiangVal
  @MineStore.State watchObj
  @MineStore.State myLikePostObj
  @MineStore.Action getMyLikePosts
  @HomeStore.Action getWatchUser
  @HomeStore.Action getLikePost;
  @MineStore.Action getMyWatch
  myTime = new Date()
  curIndex = ''
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  toDetail (item) {
    switch (item.type) {
      case 0:
        this.$router.push(`/detail/${item._id}`)
        break;
      case 1:
        this.$router.push(`/activitydetail/${item._id}`)
        break;
      case 2:
        this.$router.push(`/votedetail/${item._id}`)
        break;
      case 3:
        this.$router.push(`/coursedetail/${item._id}`)
        break;
      case 4:
        this.$router.push(`/detail/${item._id}`)
        break;
    }
  }
  Tags (tags) {
    // if (tag && typeof tag === 'object') {
    //   return Object.keys(tag);
    // }
    return Object.keys(tags).map(t => ({value: this.tagsObject[t], num: tags[t]}))
  }
  Average (scores) {
    return (scores.reduce((acc, item) => acc + item, 0) / scores.length).toFixed(1) || 0;
  }
  _turntoIndex (item) {
    this.$router.push({
      path: '/personindex',
      query: {
        userId: item.creatorId
      }
    })
  }
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
  created () {
    // this.getMyLikePosts()
  }
  _toLike (item, i) {
    const params = {
      postId: item._id
    }
    this.getLikePost(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        if (this.myLikePostObj[item._id]) {
          this.$vux.toast.text('已取消点赞', 'middle');
          item.likeNum--;
        } else {
          this.$vux.toast.text('点赞成功', 'middle');
          item.likeNum++;
        }
        // this.getMyLikePosts();
        this.$emit('afterlike')
      }
    })
  }
  watchUser (user2Obj) {
    this.getWatchUser({user2Obj, status: 0}).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('关注成功', 'middle');
        this.getMyWatch()
      }
    })
  }
}
</script>
<style lang="less">
  .item-list {
    .tiezi-box {
      position: relative;
    }
    .qizhi {
      line-height: 30px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      span {
        position: absolute;
        color: #ffffff;
        font-size: 12px;
        z-index: 2;
        top: 2px;
        left: 2px;
        white-space: nowrap;
      }
      i {
        position: absolute;
        color: #eb6363;
        font-size: 28px;
        top: -2px;
        left: -2px;
      }
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      span {
        margin-left: 20px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #C4C4C4;
        &.active{
        	color:#EFA79B;
        }
      }
    }
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
  .img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 200px;
      min-height: 70px;
      min-width: 70px;
    }
    .img-box {
      margin-bottom: 5px;
      margin-right: 5px;
    }
  }
  .item-list-box {
    position: relative;
    background: #ffffff;
    // font-size: 12px;
    margin-bottom: 5px;
    margin: 0 auto;
    width: 95%;
    margin-bottom: 5px;
    border-radius: 10px;
    margin-top: 5px;
    padding: 10px 20px 10px 5px;
    box-sizing: border-box;
    .name-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color:#414042;
    }
    .weui-cell__ft {
      text-align: left;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .img-list {
      display: flex;
      width: 95%;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 10px;
      img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 200px;
        min-width: 70px;
        min-height: 70px;
      }
    }
    .con {
    	color:#5F5F5F;
      line-height: 24px;
      padding-bottom: 8px;
      display: -webkit-box;
      // word-break:break-all;
      white-space: normal;
      // -webkit-box-orient: vertical;
      // display: -webkit-box;
      // overflow: hidden;
      // -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      position: relative;
      top:-2px;
      pre{
        white-space: normal;
      }
      // -webkit-line-clamp: 2;
      // overflow: hidden;
    }
    .type {
      color: #666666;
    }
    .focusman {
      height: 18px;
      // border: 1px solid #E5E5E5;
      padding: 2px 8px;
      color: #666666;
      // font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .top {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .left {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .attention{
      	position: absolute;
      	bottom:2px;
      	right:9%;
      	color: #D36566;
        border-radius:50%;
      }
    }
    .changeImg {
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .right {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .main {
      padding-left: 20%;
    }
    .right-1 {
      display: flex;
      flex-direction: column;

      .time-label {
        margin-right: 10px;
        color:#BDBDBD;
      }
      .item-from{
        color:#8AA2AD;
        font-size: 12px;
      }
    }
    .right-2 {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bot {
      height: 48px;
      display: flex;
      align-items: center;
    }
  }
  #course {
  .imenu {
    padding: 0 8px 8px;
    a {
      margin-left: 0!important;
    }
  }
  .item-box {
    // font-size: 12px;
    background: #ffffff;
    width: 95%;
    margin: 0 auto;
    margin: 0 auto 4px auto;
    padding: 10px 12px;
    border-radius: 10px;
    .course-content {
      width: 100%;
      display: inline-block;
      position: relative;
      .left-part {
        display: flex;
        align-items: center;
        .avatar {
          display: inline-block;
          vertical-align: top;
          width: 50px;
        }
        .course-teacher {
          padding: 5px 0;
          display: inline-block;
          overflow: hidden;
          .course {
            font-size: 14px;
            color: #000000;
          }
          .teacher {
            font-size: 12px;
            color: #333333;
            span {
              margin-left: 10px;
            }
          }
        }
      }
    }
    .tags {
      margin: 3px 0;
      .tag {
        display: inline-block;
        color: #666666;
        margin-right: 10px;
        margin-bottom: 5px!important;
        // border: 1px solid red;
        padding: 2px 6px;
        border-radius: 5px;
        background: #ebebeb;
        // font-size: 12px;
      }
    }
    .total-score {
      position: absolute;
      top: 0;
      right: 0;
      // float: right;
      text-align: center;
      .score {
        font-size: 16px;
      }
      .total {
        // font-size: 12px;
      }
    }
  }
  .hot-comment {
    align-items: flex-start;
    .weui-cell__ft {
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .vux-label {
      white-space: nowrap;
      margin-right: 10px;
    }
  }
  }
</style>
